<template>
  <el-dialog :title="title" v-model="visible" width="90%" :close-on-click-modal="false">
    <el-tabs tab-position="left" v-model="activeName" style="height: 600px" :before-leave="handleTabLeave">
      <el-tab-pane label="基本信息" name="base">
        <ModelBase ref="baseTabRef" :pageType="pageType" :model="model"/>
      </el-tab-pane>
      <el-tab-pane label="属性配置" name="prop">
        <PropConfig ref="propTabRef" :pageType="pageType" :model="model"/>
      </el-tab-pane>
      <el-tab-pane label="定制参数" name="opts">定制参数</el-tab-pane>
      <el-tab-pane label="权限配置" name="auth">权限配置</el-tab-pane>
      <el-tab-pane label="表单预览" name="preview">
        <PreviewForm
            ref="previewTabRef"
            :page-type="PageTypeEnum.ADD"
            :area-code="model.areaCode"
            :model-code="model.code"
        />
      </el-tab-pane>
      <el-tab-pane label="主页预览" name="homepage">
        <PreviewList
            ref="homepageTabRef"
            :page-type="PageTypeEnum.ADD"
            :area-code="model.areaCode"
            :model-code="model.code"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="isEdit()" type="primary" icon="Check" @click="handleSave">保存</el-button>
        <el-button icon="Close" @click="handleCancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs, nextTick } from 'vue';
import ModelBase from '@/views/module/model/base.vue';
import PreviewForm from '@/views/module/code/form.vue';
import PreviewList from '@/views/module/code/list.vue';
import PropConfig from '@/views/module/prop/config.vue';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';
import modelApi from '@/api/module/model';

export default defineComponent({
  name: 'ModelConfig',
  components: {
    ModelBase,
    PreviewForm,
    PreviewList,
    PropConfig,
  },
  setup(_, ctx) {
    const { proxy } = getCurrentInstance();
    const vueData = reactive({
      title: '',
      pageType: PageTypeEnum.ADD,
      model: {
        uid: '',
        code: '',
        name: '',
        areaCode: '',
      },
      visible: false,
      activeName: 'base',
    });

    function setTitle(type, model) {
      if (type === PageTypeEnum.ADD) {
        vueData.title = '模型新增'
      } else if (type === PageTypeEnum.EDIT) {
        vueData.title = model.name + '(' + model.code + ')' + '编辑';
      } else if (type === PageTypeEnum.UPDATE) {
        vueData.title = model.name + '(' + model.code + ')' + '变更';
      } else {
        vueData.title = model.name + '(' + model.code + ')' + '查看';
      }
    }

    function handleTabLeave(newTab) {
      if (vueData.pageType === PageTypeEnum.ADD && newTab !== 'base' && vueData.model.uid === '') {
        vueData.activeName = 'base';
        proxy.$modal.alert('模型未保存，不能继续配置！');
        return false;
      }
      if (newTab === 'prop' || newTab === 'preview' || newTab === 'homepage') {
        proxy.$refs[newTab + 'TabRef'].load();
      }
      return true;
    }

    const handleCancel = () => {
      vueData.visible = false;
      ctx.emit('refresh');
    };

    const handleSave = () => {
      proxy.$refs['baseTabRef'].handleSubmit();
    };

    const show = async (pageType, model) => {
      vueData.visible = true;
      vueData.pageType = pageType;
      vueData.activeName = 'base';
      Object.assign(vueData.model, model, { vipLevel: '' + model.vipLevel, swt: {}, ext: {} });
      vueData.model.uid = model.uid;
      if (model.uid !== '') {
        modelApi.getModel(model.uid).then((res) => {
          Object.assign(vueData.model, res.data, { vipLevel: '' + res.data.vipLevel });
        });
      }
      setTitle(pageType, vueData.model);
      await nextTick(() => {
        proxy.$refs['baseTabRef'].load();
      })
    };

    function isEdit() {
      return vueData.pageType !== PageTypeEnum.QUERY && vueData.activeName === 'base';
    }

    return {
      show,
      PageTypeEnum,
      isEdit,
      ...toRefs(vueData),
      handleSave,
      handleCancel,
      handleTabLeave,
    };
  }
});
</script>

<style scoped>

</style>